<template>
    <div>
        <el-card class="mb-4" shadow="never">
            <div class="text-xl font-medium mb-[20px]">搜索框</div>
            <el-form :model="state.queryParams" :inline="true">
                <el-form-item label="文章标题：">
                    <el-input v-model="state.queryParams.title" placeholder="请输入文章标题" class="w-180"> </el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select class="w-[150px]" v-model="state.queryParams.status">
                        <el-option label="全部" value="" />
                        <el-option label="显示" value="1" />
                        <el-option label="隐藏" value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="mb-4" shadow="never">
            <div class="text-xl font-medium mb-[20px]">默认</div>
            <fileExport :fetchFun="articleExport" :params="state.queryParams" />
        </el-card>
        <el-card class="mb-4" shadow="never">
            <div class="text-xl font-medium mb-[20px]">自定义</div>
            <fileExport ref="fileExportRef" :fetchFun="articleExport" :params="state.queryParams" :pageSize="100"
                :fileTypes="['xls']">
                <el-button type="primary" class="mr-[15px]" @click="fileExportRef.open()">导出自定义</el-button>
            </fileExport>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="compFileExport">
import { ref, reactive } from 'vue';
import { articleExport } from '/@/api/cms/article';

const state = reactive({
    queryParams: {
        title: '',
        status: '',
    },
    value: "",
    value2: ""
});

const fileExportRef = ref(null);

</script>

<style scoped lang="scss"></style>